<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    html {
      height: 100%;
    }

    body {
      background: url(timg.jpeg);
      background-size: 305%;
      background-position: 51% 20%;
    }

    .playSpace {
      border: black solid 1px;
      height: 545px;
      width: 600px;
      margin: 7% auto 0px;
      position: relative;
      background-color: #9fb970;
    }

    #snake li {
      height: 18px;
      width: 18px;
      background-color: black;
      position: absolute;
      margin: 1px;
    }

    .food {
      height: 18px;
      width: 18px;
      background-color: red;
      position: absolute;
      margin: 1px;
    }

    .wall {
      height: 18px;
      width: 18px;
      background-color: blue;
      position: absolute;
      margin: 1px;
    }

    #template {
      display: none;
    }

    #templateWall {
      display: none;
    }
  </style>
  <script src="jquery.min.js"></script>
  <script>
    window.onload = function () {
      // document.onclick = function () {
      //     $("#snake li").eq(0).animate({
      //         left: "400px"
      //     })
      // }

      let timeCount = 0;
      let snakeLi = $("#snake li");
      let speedX = 0;
      let speedY = 0;
      let head = snakeLi.eq(0);
      let score = 0;
      let control = 0;
      createFood();
      createWall();

      // console.log(1)
      // for (let i = 1; i < snakeLi.length; i++) {

      let moving = setInterval(function () {
        for (let i = $("#snake li").length; i > 0; i--) {
          $("#snake li")
            .eq(i)
            .css({
              left: $("#snake li")
                .eq(i - 1)
                .css("left"),
              top: $("#snake li")
                .eq(i - 1)
                .css("top"),
            });
        }
        head.css({
          left: parseInt(head.css("left")) + 20 * speedX,
          top: parseInt(head.css("top")) + 20 * speedY,
        });
        for (let j = 3; j < $("#snake li").length; j++) {
          if (knock(head, $("#snake li").eq(j))) {
            alert(`勝敗乃兵家常事\n大俠請重新來過\n您的得分是${score}`);
            clearInterval(moving);
          }
        }
        for (let k = 0; k < $(".wall").length; k++) {
          if (knock(head, $(".wall").eq(k))) {
            alert(`勝敗乃兵家常事\n大俠請重新來過\n您的得分是${score}`);
            clearInterval(moving);
          }
        }
        if (knock(head, $(".food").eq(1))) {
          $(".food").eq(1).removeClass("food").appendTo($("#snake"));
          createFood();
          resetWall();
          createWall();
          score++;
        }

        if (
          parseInt(head.css("left")) > 580 ||
          parseInt(head.css("top")) > 525 ||
          parseInt(head.css("left")) < 0 ||
          parseInt(head.css("top")) < 0
        ) {
          alert(`勝敗乃兵家常事\n大俠請重新來過\n您的得分是${score}`);
          clearInterval(moving);
        }

        // snakeLi.each(function(key){
        //     console.log(snakeLi.eq(key)[0].style.left)
        // })
        // console.log($(".wall").eq(1, 2, 3));
      }, 250);

      document.onkeyup = function (event) {
        event = event || window.event;
        timeCount++;
        event.preventDefault();
        if (event.keyCode == 39 && speedX !== -1) {
          speedX = 1;
          speedY = 0;
        }
        if (event.keyCode == 37 && speedX !== 1) {
          speedX = -1;
          speedY = 0;
        }
        if (event.keyCode == 38 && speedY !== 1) {
          speedX = 0;
          speedY = -1;
        }
        if (event.keyCode == 40 && speedY !== -1) {
          speedX = 0;
          speedY = 1;
        }
        if (event.keyCode == 32) {
          alert("暫停");
        }
      };

      function createFood() {
        let newFood = $("#template").clone(true);
        newFood
          .attr("id", "")
          .css({
            left: parseInt(Math.random() * 30) * 20,
            top: parseInt(Math.random() * 25) * 20,
          })
          .appendTo($(".playSpace")[0]);
      }

      function createWall() {
        //   console.log(parseInt(head.css("left")))
        for (var i = 0; i < 100; i++) {
          if ($(".wall").length > 10) {
            break;
          }
          let newWall = $("#templateWall").clone(true);
          let left = parseInt(Math.random() * 30) * 20;
          let top = parseInt(Math.random() * 25) * 20;
          if (
            left == parseInt(head.css("left")) ||
            top == parseInt(head.css("top"))
          ) {
            console.log("重新生成");
            continue;
          }
          //   console.log(left, top);
          newWall
            .attr("id", "")
            .css({
              left: left,
              top: top,
            })
            .appendTo($(".playSpace")[0]);
        }
      }

      function resetWall() {
        // console.log($(".wall").eq(1, 2, 3)[0]);
        for (let i = 10; i > 0; i--) {
          $(".wall").eq(i).remove();
        }
      }

      function knock(node1, node2) {
        var l1 = node1.css("Left");
        // var r1 = node1.css("Left")
        // + node1.offsetWidth;
        var t1 = node1.css("Top");
        // var b1 = node1.css("Top")
        // + node1.offsetHeight;

        var l2 = node2.css("Left");
        // var r2 = node2.css("Left")
        // + node2.offsetWidth;
        var t2 = node2.css("Top");
        // var b2 = node2.css("Top")
        //  + node2.offsetHeight;

        if (l2 !== l1 || t2 !== t1) {
          return false;
        } else {
          return true;
        }
      }
    };
  </script>

  <body>
    <div class="playSpace">
      <ul id="snake">
        <li
          style="left: 0px; top: 240px; background-color: yellow; z-index: 2"
        ></li>
        <li style="left: 0px; top: 240px"></li>
        <li style="left: 0px; top: 240px"></li>
      </ul>
      <li class="food" id="template"></li>
      <li class="wall" id="templateWall"></li>
    </div>
  </body>
</html>
